<script setup lang="ts">
import { onMounted, reactive, ref } from 'vue';
import HelloWorld from './components/HelloWorld.vue';
import { Search } from '@element-plus/icons-vue/global';

const dialogVisible = ref(false)
const formLabelAlign = reactive({
  name: '',
  region: '',
  type: '',
})
const handleClose = (done: () => void) => {

}
const activeName = ref('first')

const handleClick = (tab: TabsPaneContext, event: Event) => {
  console.log(tab, event)
}

interface ListItem {
  value: string
  label: string
}

const list = ref<ListItem[]>([])
const options = ref<ListItem[]>([])
const value = ref<string[]>([])
const loading = ref(false)

onMounted(() => {
  list.value = states.map((item) => {
    return { value: `${item}`, label: `${item}` }
  })
})

const remoteMethod = (query: string) => {
  if (query) {
    loading.value = true
    setTimeout(() => {
      loading.value = false
      options.value = list.value.filter((item) => {
        return item.label.toLowerCase().includes(query.toLowerCase())
      })
    }, 200)
  } else {
    options.value = []
  }
}

const states = [
  '小米5',
  '荣耀6',
  'Arizona',
  'Arkansas',
  'California',
  'Colorado',
  'Connecticut',
  'Delaware',
  'Florida',
  'Georgia',
  'Hawaii',
  'Idaho',
  'Illinois',
  'Indiana',
  'Iowa',
  'Kansas',
  'Kentucky',
  'Louisiana',
  'Maine',
  'Maryland',
  'Massachusetts',
  'Michigan',
  'Minnesota',
  'Mississippi',
  'Missouri',
  'Montana',
  'Nebraska',
  'Nevada',
  'New Hampshire',
  'New Jersey',
  'New Mexico',
  'New York',
  'North Carolina',
  'North Dakota',
  'Ohio',
  'Oklahoma',
  'Oregon',
  'Pennsylvania',
  'Rhode Island',
  'South Carolina',
  'South Dakota',
  'Tennessee',
  'Texas',
  'Utah',
  'Vermont',
  'Virginia',
  'Washington',
  'West Virginia',
  'Wisconsin',
  'Wyoming',
]
</script>

<template>
  <div class="container">
    <div class="common-layout">
      <el-container>
        <el-header style="background-color: #545c64;">
          <el-row>
            <el-col :span="1" />
            <el-col :span="1">
              <div class="block">
                <el-avatar :size="50" src="https://tm-image.tianyancha.com/tm/e07c3d29ad6739e3a2342a8031609b1b.jpg" />
              </div>
            </el-col>
            <el-col :span="2" />
            <el-col :span="1">
              <el-button size="large" text style="height: 100%;"><span style="color: white;">首页</span></el-button>
            </el-col>
            <el-col :span="1">
                <el-button @click="router.push('/users/eduardo')" size="large" text style="height: 100%;"><span style="color: white;">购物车</span></el-button>
            </el-col>
            <el-col :span="1">
              <el-button size="large" text style="height: 100%;"><span style="color: white;">订单</span></el-button>
            </el-col>
            <el-col :span="3" />
            <el-col :span="4">
              <el-select size="large" style="margin-top: 10px;float:right;" v-model="value" multiple filterable remote
                reserve-keyword placeholder="搜索商品" :remote-method="remoteMethod" :loading="loading">
                <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
              </el-select>
            </el-col>
            <el-col :span="1">
              <el-icon style="vertical-align: middle;background-color: white;width: 39px;height: 66%; margin-top: 10px;">
                <Search />
              </el-icon>
            </el-col>
            <el-col :span="7" />
            <el-col :span="1">
              <el-button size="large" text style="height: 100%;" @click="dialogVisible = true"><span
                  style="color: white;">注销</span></el-button>
            </el-col>
            <el-col :span="1">
              <div class="block">
                <el-avatar :size="50" src="https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png" />
              </div>
            </el-col>
          </el-row>
        </el-header>
        <el-main>
          <HelloWorld />
        </el-main>
      </el-container>
    </div>
    <el-dialog v-model="dialogVisible" title="登录  / 注册" width="30%" :before-close="handleClose">
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="登录" name="login">
          <el-form :model="formLabelAlign">
            <el-form-item label="账号：">
              <el-input v-model="formLabelAlign.name" />
            </el-form-item>
            <el-form-item label="密码：">
              <el-input v-model="formLabelAlign.region" />
            </el-form-item>
          </el-form>
        </el-tab-pane>
        <el-tab-pane label="注册" name="register">注册</el-tab-pane>
      </el-tabs>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="dialogVisible = false">
            登录
          </el-button>
          <!-- <el-button type="primary" @click="dialogVisible = false">
            注册
          </el-button> -->
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<style scoped>
.container {
  width: 100%;
  height: 100%;
}

.block {
  margin-top: 6px;
  text-align: center;
}
</style>
